<template>
  <div class="set_bar drag">
    <div class="title font_small">{{ title }}</div>
    <div class="btn">
      <span
        v-if="showStick"
        class="iconfont icon-ziyuan no_drag"
        :class="{ active: isTop }"
        @click="setTop"
      >
      </span>
      <span
        v-if="showReduce"
        class="iconfont icon-zuixiaohua1 no_drag"
        @click="winIcp('reduce', showReduce)"
      ></span>
      <span
        v-if="!isWinMax && showExtend"
        class="iconfont icon-zuidahua1 no_drag"
        @click="changeExtend"
      ></span>
      <span
        v-if="isWinMax && showExtend"
        class="iconfont icon-biaozhunhua no_drag"
        @click="changeExtend"
      ></span>
      <span
        class="iconfont icon-guanbi no_drag"
        @click="winIcp('close', closeType)"
      ></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
defineProps({
  title: {
    // 标题
    type: String,
    default: ''
  },
  showStick: {
    // 置顶
    type: Boolean,
    default: true
  },
  showReduce: {
    // 最小化
    type: Boolean,
    default: true
  },
  showExtend: {
    // 最大化
    type: Boolean,
    default: true
  },
  showClose: {
    // 关闭
    type: Boolean,
    default: true
  },
  closeType: {
    // 关闭类型  0关闭 1隐藏托盘
    type: [Number, String],
    default: 0
  }
})

const isWinMax = ref(false) // 当前窗口是否为最大值
const isTop = ref(false) // 当前窗口是否置顶

const winIcp = (active: string, data: any) => {
  window.electron.ipcRenderer.send('setBar', { active, data })
}

// 窗口是否置顶
const setTop = () => {
  isTop.value = !isTop.value
  winIcp('top', isTop.value)
}

// 切换窗口是否全屏
const changeExtend = () => {
  isWinMax.value = !isWinMax.value
  winIcp('extend', isWinMax.value)
}
</script>

<style lang="scss" scoped>
.set_bar {
  height: 30px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn {
    display: flex;
    align-items: center;
    span {
      font-size: 13px;
      margin-right: 13px;
      cursor: pointer;
      &:last-child {
        margin-right: 0;
      }
    }
    .active {
      color: #07c160;
    }
  }
}
</style>
